<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">用户相关</el-breadcrumb-item>
                <el-breadcrumb-item class="up"><a @click="goTo('/')">会员列表</a></el-breadcrumb-item>
                <el-breadcrumb-item>会员信息</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 用户信息 -->
            <div class="userinformation">
              <div class="title">会员信息</div>
              <div class="message">
                <p><span>会员ID :</span><span>{{userinformation.id}}</span></p>
                <p><span>注册时间 :</span><span>{{userinformation.userCreateTime | dateForma('YYYY-MM-DD HH:mm:ss')}}</span></p>
                <p><span>手机号码 :</span><span>{{userinformation.phoneNumber}}</span></p>
                <p><span>微信账号 :</span><span v-if="userinformation.wechatNickname">{{userinformation.wechatNickname}}</span><span v-else="userinformation.phoneNumber">{{userinformation.phoneNumber}}</span></p>
                <p>
                  <span>车牌号 :</span>
                  <!-- <span>{{userinformation.licence}}</span> -->
                  <span><input type="text" v-model="userinformation.licence"></span>
                </p>
                <p>
                  <span>账号状态 :</span>
                  <span>
                    <el-radio-group v-model="userinformation.enable">
                      <el-radio :label="1">正常</el-radio>
                      <el-radio :label="2">禁用</el-radio>
                      <el-radio :label="3">已注销</el-radio>
                    </el-radio-group>
                  </span>
                </p>
                <p><span></span><span><el-button @click="saveMessage()">保存</el-button></span></p>
              </div>
              <div class="title">钱包信息</div>
              <div class="message money">
                <p v-if="cardsList1"><span>时长卡 :</span><span>{{cardsList1.overTime | dateForma('YYYY-MM-DD HH:mm:ss')}}到期</span></p>
                <p v-if="cardsList2"><span>次卡 :</span><span>{{cardsList2.remaining}}次{{cardsList2.overTime | dateForma('YYYY-MM-DD HH:mm:ss')}}到期</span></p>
                <p v-if="cardsList3"><span>新手卡 :</span><span>{{cardsList3.overTime | dateForma('YYYY-MM-DD HH:mm:ss')}}到期</span></p>
                <p v-if="cardsList4"><span>新手7天一次卡 :</span><span>{{cardsList4.overTime | dateForma('YYYY-MM-DD HH:mm:ss')}}到期</span></p>
                <p v-if="cardsList5"><span>赠送10天会员卡 :</span><span>{{cardsList5.overTime | dateForma('YYYY-MM-DD HH:mm:ss')}}到期</span></p>
                <p><span>余额 :</span><span>￥{{userinformation.money+userinformation.giveMoney}}</span></p>
                <p><span>累计消费 :</span><span>￥{{userinformation.total}}</span></p>
                <p><span>累计充值 :</span><span>￥{{userinformation.totalMoney}}</span></p>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'
  export default {
    name: 'UserListDetails',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        id: '',//会员id
        userinformation:'',//会员信息
        cardsList1:'',//卡片信息 -时长卡
        cardsList2:'',//卡片信息 -次卡
        cardsList3:'',//卡片信息 -新手卡
        cardsList4:'',//卡片信息 -新手卡7天一次卡
        cardsList5:'',//卡片信息 -10天会员卡
      }
    },
    mounted() {
      // 取到路由带过来的参数
      this.id = JSON.parse(JSON.stringify(this.$route.query.data.id));
      console.log(this.id);
      this.getUserListDetails();
    },
    // 时间格式过滤
    filters: {
      dateForma(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
        return moment(dataStr).format(pattern)
      }
    },
    methods: {
      // 路由
      goTo(path) {
        this.$router.push(path);
      },
      // 根据id查询会员详情
      getUserListDetails(){
        this.$axios.post(this.baseURL+'user/info',{
          "id": this.id,
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"根据id 查询会员详情");
          if(res.data.code==1){
            this.userinformation = res.data.data;
            var card = res.data.data.userCardsList;

            for(var i =0;i<=card.length;i++){
            	if(card[i].cardType == '1'){//时长卡
            		 console.log("时长卡");
                 this.cardsList1 = card[i];
            	}
            	if(card[i].cardType == '2'){//次卡
            		console.log("次卡");
                this.cardsList2 = card[i];
            	}
            	if(card[i].cardType == '3'){//新手卡
            		console.log("新手卡");
                this.cardsList3 = card[i];
            	}
              if(card[i].cardType == '4'){//新手卡7天一次卡
                this.cardsList4 = card[i];
              }
              if(card[i].cardType == '5'){//10天会员卡
                this.cardsList5 = card[i];
              }
            }

          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 保存修改
      saveMessage(){
        console.log("会员车牌号："+this.userinformation.licence);
        console.log("会员账号状态："+this.userinformation.enable);
        this.$axios.post(this.baseURL+'user/updateUserInfo',{
          "id":this.userinformation.id,
          "enable": this.userinformation.enable,
          "licence": this.userinformation.licence,
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
            this.$message({
              message: '保存成功',
              type: 'success'
            });
            this.$router.go(-1);//返回上一层
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 查看充值记录
      goToRecord(){
        this.$router.push({
          path: '/RechargeRecord',
          query: {
            data: this.id,
          }
        })
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .reset{
    color: #409EFF;
    font-size: 10px;
  }
  .message{
    position: relative;
    p:last-child{
      line-height: 80px;
    }
  }
  .money{
    p:last-child{
      line-height: 25px;
      padding: 5px 0 0 0;
      box-sizing: border-box;
    }
  }
  .record{  /* 钱包信息 -记录*/
    font-style: normal;
    padding: 0 20px;
    color: #409EFF;
    cursor: pointer;
  }
</style>
